<template>
  <div>
    <a @click="showModal">
      添加
    </a>
    <a-modal
      title="添加包厢信息"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-item label="楼层名称">
            <a-input
              v-decorator="[
	                'floorall',
	                {rules: [{ required: false, message: '不能为空' }]}
	                ]"
              placeholder="楼层名称"
            />
          </a-form-item>
          <a-form-item label="服务店名">
            <a-input
              v-decorator="[
	                'servicetype',
	                {rules: [{ required: false, message: '不能为空' }]}
	                ]"
              placeholder="服务店名"
            />
          </a-form-item>
          <a-form-item label="服务介绍">
            <a-textarea
              v-decorator="[
	                'servicedesc',
	                {rules: [{ required: false, message: '不能为空' }]}
	                ]"
              placeholder="服务介绍"></a-textarea>
          </a-form-item>
          <a-form-item label="logo图片">
            <a-upload
              v-decorator="[
	                'filelogotest'
	                ]"
              name="filelogo"
              action="http://localhost:8080/jeecg-boot/ltmjh/floorservice/savefilelogo"
              :headers="headers"
              @change="handleChangelogo"
            >
              <a-button> <a-icon type="upload" /> logo上传 </a-button>
            </a-upload>
          </a-form-item>
          <a-form-item label="logo高亮图片">
            <a-upload
              v-decorator="[
	                'filelogorighttest'
	                ]"
              name="filelogoright"
              action="http://localhost:8080/jeecg-boot/ltmjh/floorservice/savefilelogoright"
              :headers="headers"
              @change="handleChangelogoright"
            >
              <a-button> <a-icon type="upload" /> 高亮logo上传 </a-button>
            </a-upload>
          </a-form-item>
          <!--<a-form-item label="服务介绍图片">
            <a-upload
              v-decorator="[
	                'filename'
	                ]"
              name="file"
              action="http://localhost:8080/jeecg-boot/ltmjh/floorservice/savefile"
              :headers="headers"
              @change="handleChange"
            >
              <a-button> <a-icon type="upload" /> 服务介绍图片上传 </a-button>
            </a-upload>
          </a-form-item>-->
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //ModalText: 'Content of the modal',
        form:this.$form.createForm(this),
        visible: false,
        confirmLoading: false,
        headers: {
          authorization: 'authorization-text',
        },
        filelogo:"",
        filelogoright:"",
        filename:""
      };
    },
    methods: {
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        console.log("点击了确定事件！");
        this.confirmLoading = true;
        e.preventDefault()//规定阻止e事件的默认动作。
        //获取表单信息
        this.form.validateFields((error, values) => {//获取form表单中的数据
          if (!error) {
            //当没有错误时调用提交方法
            console.log(values);

            var filelogoname = values.filelogotest.file.name;
            var filerightname = values.filelogorighttest.file.name;
            //var filenameT = values.filename.file.name;
            //上传一个对象
            var datafrom = {
              floorall:values.floorall,
              servicetype:values.servicetype,
              servicedesc:values.servicedesc,
              logoimgaddress:filelogoname,
              logoimgrightaddress:filerightname
              //imgaddress:filenameT
            };
            console.log("测试到这一步！");
            console.log(datafrom);
            //修改此处的保存信息
            this.axios({
              method:"post",
              url:"/ltmjh/floorservice/saveserviceVo",
              data:datafrom
            }).then((res)=>{
              //添加的数据会继续回显，上一次的保存没有消失
              console.log(res);
              this.form.resetFields();

              //这里执行强制刷新
              location.reload();
            });
          }
        })

        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
        }, 2000);
      },
      handleCancel(e) {
        console.log('Clicked cancel button');
        this.visible = false;
      },
      //logo上传确定
      handleChangelogo(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} 上传成功`);
          this.filelogo = info.file.name;
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败.`);
        }
      },
      //logo高亮上传
      handleChangelogoright(info) {
        if (info.file.status !== 'uploading') {
          console.log("执行1");
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} 上传成功`);
          this.filelogoright = info.file.name;
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败.`);
        }
      },

      //服务类型图片上传
      /*handleChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} 上传成功`);
          this.filename = info.file.name;
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败.`);
        }
      },*/
    },
  };
</script>